<template>
	<Top-Page>
		<cu-custom bgColor="bg-gradual-white-3" :isBack="true">
			<template #content>我的资料</template>
		</cu-custom>
		<form>
			<!-- <view class="cu-form-group" style="height: 140rpx">
        <view class="title">头像</view>
        <view class="im-flex im-align-items-center">
          <avatar
            selWidth="240px"
            selHeight="480upx"
            @upload="uploadAvatar"
            :avatarSrc="userInfo.avatar"
            avatarStyle="width: 100rpx; height: 100rpx; border-radius: 100%;"
          ></avatar>
          <text class="cuIcon-right ml-10 f-18 text-grey"></text>
        </view>
      </view> -->
			<view class="cu-form-group cu-form-group-avatar" style="height: 140rpx">
				<view class="avatar-wrap" @click.stop="changeAvatarNum(1)">
					<avatar
						:id="''"
						:class="[['avatar', 'avatar1'].includes(avatarNumStr) ? 'avatar-content__activity' : 'avatar-content']"
						selWidth="240px"
						selHeight="480upx"
						@upload="uploadAvatar"
						:avatarSrc="userInfo.avatar"
						avatarStyle="width: 100rpx; height: 100rpx; border-radius: 100%;"
					></avatar>
				</view>

				<view class="avatar-wrap" @click.stop="changeAvatarNum(2)">
					<avatar
						:id="1"
						:class="[avatarNumStr === 'avatar2' ? 'avatar-content__activity' : 'avatar-content']"
						selWidth="240px"
						selHeight="480upx"
						@upload="uploadAvatar"
						:avatarSrc="userInfo.avatar2"
						avatarStyle="width: 100rpx; height: 100rpx; border-radius: 100%;"
					></avatar>
				</view>

				<view class="avatar-wrap" @click.stop="changeAvatarNum(3)">
					<avatar
						:id="2"
						:class="[avatarNumStr === 'avatar3' ? 'avatar-content__activity' : 'avatar-content']"
						v-if="userInfo.avatar2"
						selWidth="240px"
						selHeight="480upx"
						@upload="uploadAvatar"
						:avatarSrc="userInfo.avatar3"
						avatarStyle="width: 100rpx; height: 100rpx; border-radius: 100%;"
					></avatar>
				</view>

				<!-- <view v-if="!userInfo.avatar2 || !userInfo.avatar3" class="add-avatar" @click.stop="addAvatar">+</view> -->
			</view>

			<view class="warn">
				请认真填写以下所有的内容，本软件在你共同愿意的情况下，点击允许搜索和推送信息，系统将会从“相同的两个数或两个字以上，给你推送相关的人脉，让我们迅速找到曾经失联或现在有缘的朋友、让我们能更快地发展更新更好的人脉，在新的时机上有一个更好的收获
			</view>
			<!-- <view class="cu-form-group switch">
        <view class="content">
          <text>是否可被搜索</text>
        </view>
        <view class="action">
          <switch
            class="switch"
            @change="setBeSearch"
            :class="userInfo.be_search ? 'checked' : ''"
            :checked="userInfo.be_search"
          ></switch>
        </view>
      </view> -->
			<view class="cu-form-group">
				<view class="title">账号</view>
				<view class="text-gray">{{ userInfo.account }}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">{{ globalConfig.sysInfo && globalConfig.sysInfo.runMode == 1 ? "姓名" : "昵称" }}</view>
				<view class="text-gray" v-if="globalConfig.sysInfo && globalConfig.sysInfo.runMode == 1">
					{{ userInfo.realname }}
				</view>
				<template v-if="globalConfig.sysInfo && globalConfig.sysInfo.runMode == 2">
					<input
						class="uni-input"
						style="text-align: right"
						v-if="userInfoNum == 1"
						v-model="userInfo.realname"
						placeholder="请输入昵称"
					/>
					<input
						class="uni-input"
						style="text-align: right"
						v-if="userInfoNum == 2"
						v-model="userInfo.realname2"
						placeholder="请输入昵称"
					/>
					<input
						class="uni-input"
						style="text-align: right"
						v-if="userInfoNum == 3"
						v-model="userInfo.realname3"
						placeholder="请输入昵称"
					/>
				</template>
			</view>
			<view class="cu-form-group">
				<view class="title">畅了号</view>
				<input class="uni-input" style="text-align: right" v-model="userInfo.cl_code" placeholder="请输入畅了号" />
			</view>
			<view class="cu-form-group">
				<view class="title">e-mail</view>
				<input class="uni-input" style="text-align: right" v-model="userInfo.email" placeholder="请输入email地址" />
			</view>

			<!-- 年龄 -->
			<view class="cu-form-group">
				<view class="title">年龄</view>
				<input
					class="uni-input"
					type="number"
					style="text-align: right"
					v-model="userInfo.age"
					maxlength="3"
					placeholder="请输入您的年龄"
					@blur="ageBlur"
				/>
			</view>

			<view class="cu-form-group">
				<view class="title">性别</view>
				<view>
					<radio-group @change="changeSex">
						<label class="radio mr-10" v-for="x in sexList">
							<radio name="sex" :value="x.id" :checked="userInfo.sex == x.id" />
							{{ x.name }}
						</label>
					</radio-group>
				</view>
			</view>

			<!-- 实名信息 -->
			<view class="cu-form-group">
				<view class="title">实名信息</view>
				<view class="text-gray"></view>
			</view>

			<view class="cu-form-group">
				<view class="title">实名</view>
				<input
					class="uni-input"
					style="text-align: right"
					v-model="userInfo.user_name"
					placeholder="请输入您的真实姓名"
				/>
			</view>

			<view class="cu-form-group">
				<view class="title">身份证</view>
				<input
					class="uni-input"
					style="text-align: right"
					v-model="userInfo.identity"
					placeholder="请输入您的真实身份证"
				/>
			</view>

			<view class="cu-form-group">
				<view class="title">身份证住址</view>
				<input
					class="uni-input"
					style="text-align: right"
					v-model="addressData.identity_address"
					placeholder="请填写您的身份证住址"
				/>
			</view>

			<view class="cu-form-group" @click="show = !show">
				<view class="title">现住址</view>
				<view class="uni-input">
					{{ province }}{{ city }}{{ area }}
					<!-- {{ addressData.address }} -->
				</view>
			</view>

			<view class="cu-form-group cu-form-group align-start">
				<view class="title">详细地址</view>
				<textarea maxlength="50" v-model="userInfo.address" placeholder="请填写您的记忆的家人或朋友"></textarea>
			</view>
			<view class="cu-form-group align-start" style="flex-direction: column">
				<view
					class="title"
					style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right: 0"
				>
					曾经住过的地址
					<image
						v-if="userInfo.lived_address && userInfo.lived_address.length < 10"
						style="height: 40rpx"
						src="/static/image/add.png"
						mode="heightFix"
						@click="addList('lived_address', 'temp_lived_address', temp_lived_address)"
					></image>
				</view>
				<view class="">
					<view
						class="align-center"
						style="padding: 10rpx 0; display: flex; word-break: break-all"
						v-for="(item, index) in userInfo.lived_address"
						:key="index"
					>
						<text style="padding-right: 20rpx">{{ item }}</text>
						<view class="">
							<image
								style="height: 30rpx; width: 40rpx"
								src="/static/image/del.png"
								mode="heightFix"
								@click="delList('lived_address', index)"
							></image>
						</view>
					</view>
				</view>
				<input
					style="padding: 30rpx 0"
					class="uni-input"
					v-model="temp_lived_address"
					placeholder="请输入曾经住过的地址"
				/>
			</view>
			<view class="cu-form-group align-start" style="flex-direction: column">
				<view
					class="title"
					style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right: 0"
				>
					曾工作单位
					<image
						v-if="userInfo.previous_employer && userInfo.previous_employer.length < 10"
						style="height: 40rpx"
						src="/static/image/add.png"
						mode="heightFix"
						@click="addList('previous_employer', 'temp_previous_employer', temp_previous_employer)"
					></image>
				</view>
				<view class="">
					<view
						class="align-center"
						style="padding: 10rpx 0; display: flex; word-break: break-all"
						v-for="(item, index) in userInfo.previous_employer"
						:key="index"
					>
						<text>{{ item }}</text>
						<view class="">
							<image
								style="height: 30rpx; margin-left: 10rpx; white-space: nowrap"
								src="/static/image/del.png"
								mode="heightFix"
								@click="delList('previous_employer', index)"
							></image>
						</view>
					</view>
				</view>
				<input
					style="padding: 30rpx 0"
					class="uni-input"
					v-model="temp_previous_employer"
					placeholder="请输入曾工作单位"
				/>
			</view>
			<view class="cu-form-group align-start" style="flex-direction: column">
				<view
					class="title"
					style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right: 0"
				>
					曾就读过的学校
					<image
						v-if="userInfo.attended_schools && userInfo.attended_schools.length < 10"
						style="height: 40rpx"
						src="/static/image/add.png"
						mode="heightFix"
						@click="addList('attended_schools', 'temp_attended_schools', temp_attended_schools)"
					></image>
				</view>
				<view class="">
					<view
						class="align-center"
						style="padding: 10rpx 0; display: flex; word-break: break-all"
						v-for="(item, index) in userInfo.attended_schools"
						:key="index"
					>
						<text>{{ item }}</text>
						<view class="">
							<image
								style="height: 30rpx; height: 30rpx; margin-left: 10rpx; white-space: nowrap"
								src="/static/image/del.png"
								mode="heightFix"
								@click="delList('attended_schools', index)"
							></image>
						</view>
					</view>
				</view>
				<input
					style="padding: 30rpx 0"
					class="uni-input"
					v-model="temp_attended_schools"
					placeholder="请输入曾就读过的学校"
				/>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">记忆的家人或朋友</view>
				<textarea
					maxlength="20"
					v-model="userInfo.mem_family_friends"
					placeholder="请填写您的记忆的家人或朋友"
				></textarea>
			</view>
			<view class="cu-form-group" @click="skillsLearnedShow = !skillsLearnedShow">
				<view class="title">学过的技能</view>
				<view class="value-wrap-2">{{ userInfo.skills_learned }}</view>
			</view>
			<view class="cu-form-group" @click="favoriteBrandShow = !favoriteBrandShow">
				<view class="title">喜欢的品牌</view>
				<view class="value-wrap-2">{{ userInfo.favorite_brand }}</view>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">学校</view>
				<textarea maxlength="50" v-model="userInfo.school" placeholder="请填写您的记忆的家人或朋友"></textarea>
			</view>

			<!-- <view class="cu-form-group">
				<view class="title">熟悉的朋友</view>
				<input
					class="uni-input"
					style="text-align: right"
					v-model="userInfo.friends"
					placeholder="请填写您的熟悉的朋友"
				/>
			</view> -->

			<view class="cu-form-group align-start">
				<view class="title">技能</view>
				<textarea maxlength="-1" v-model="userInfo.good_at" placeholder="请填写您的技能事项"></textarea>
			</view>

			<view class="cu-form-group" @click="selectShow = !selectShow">
				<view class="title">爱好</view>
				<view class="value-wrap-2">{{ userInfo.hobby }}</view>
				<!-- <textarea maxlength="-1" v-model="userInfo.hobby" placeholder="请填写您的兴趣爱好"></textarea> -->
			</view>

			<view class="cu-form-group align-start">
				<view class="title">工作经历</view>
				<textarea maxlength="-1" v-model="userInfo.work_experience" placeholder="请填写您的工作经历"></textarea>
			</view>

			<!-- 收货地址 -->
			<view class="cu-form-group align-start">
				<view class="title">收货地址</view>
				<textarea maxlength="50" v-model="userInfo.take_address" placeholder="请填写您的收货地址"></textarea>
			</view>

			<!-- 创业就业经历 -->
			<!-- <view class="cu-form-group">
				<view class="title">创业就业经历</view>
				<input
					class="uni-input"
					style="text-align: right"
					v-model="userInfo.employment_log"
					placeholder="请填写您的创业就业经历"
				/>
			</view> -->
			<view class="cu-form-group align-start">
				<view class="title">特长专长</view>
				<textarea maxlength="50" v-model="userInfo.speciality" placeholder="请填写您的特长专长"></textarea>
			</view>

			<!-- 我的足迹 -->
			<view class="cu-form-group cu-form-group-1 align-start">
				<view class="title">我的足迹</view>
				<view class="upimage-wrap">
					<view class="upimage-item" v-for="(item, index) in footprint">
						<image
							class="upimage-item__image"
							:src="item.path || item"
							mode="aspectFill"
							@click="handlePreviewImage('footprint', index)"
						/>

						<view @click="handleRemoveFile('footprint', index)" class="close-css_icon"></view>
					</view>

					<!-- 选择图片 -->
					<view
						class="upimage-item cross-css_icon add-image"
						v-show="footprint.length < 3"
						@click="handleChooseFiles('footprint')"
					></view>
				</view>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">个性签名</view>
				<textarea maxlength="-1" v-model="userInfo.motto" placeholder="请输入个性签名"></textarea>
			</view>
			<view class="cu-form-group align-start" style="align-items: center">
				<view>公开信息</view>
				<view class="" @click="baseShow = true">
					<span>{{ baseConfigNum }}项</span>
					<span>></span>
				</view>
			</view>
		</form>
		<view class="padding flex flex-direction">
			<button
				class="cu-btn bg-green lg"
				:style="saved ? 'border: solid 1px #dbdada;' : ''"
				:disabled="saved"
				@tap="saveInfo()"
			>
				保存
			</button>
		</view>

		<view class="props-overlay" v-if="selectShow" @click="selectShow = !selectShow" @mousemove.stop.prevent></view>
		<view class="props-hobby-wrap" v-if="selectShow">
			<view class="hobby-title">
				<!-- 			<view class="title-t">选择您的爱好</view>
				<view class="cross" @click="selectShow = !selectShow"></view> -->
			</view>
			<view class="hobby-wrap">
				<view class="hobby-content">
					<view
						v-for="(item, index) in labelList"
						:class="['label-li', labelON(index) ? 'on' : '']"
						@click="changeLabel(index)"
					>
						{{ item }}
					</view>
				</view>

				<view class="add-hobby-label">
					<input
						class="add-hobby-item"
						v-for="(item, index) in addHobbyLabel"
						:maxlength="4"
						auto-height
						:value="item.value"
						@input="updateInput(index, $event)"
						placeholder="追加爱好"
						placeholder-style="color:#fff"
					/>
				</view>
			</view>
			<view class="add-wrap" @click="addHobby" v-show="addHobbyLabel.length < 10">
				<view class="add w-48 h-48">+</view>
				<view>追加您的爱好</view>
			</view>
			<view class="btn-wrap">
				<view class="btn-ca btn-cancel" @click="selectCancel">取消</view>
				<view class="btn-ca btn-affirm" @click="selectAffirm">确认</view>
			</view>
		</view>

		<!-- 公开信息 -->
		<view class="props-hobby-wrap" v-if="baseShow">
			<view class="hobby-title">
				<view class="title-t">选择您的公开信息</view>
				<view class="cross" @click="baseShow = false"></view>
			</view>
			<view class="hobby-wrap">
				<view class="hobby-content">
					<view
						v-for="(item, index) in baseList"
						class="label-li2"
						:class="[item.state === 1 ? 'on2' : '']"
						@click="changeBase(item)"
					>
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="btn-wrap">
				<view class="btn-ca btn-cancel" @click="baseShow = false">取消</view>
				<view class="btn-ca btn-affirm" @click="baseConfirm">确认</view>
			</view>
		</view>

		<!-- picker -->
		<!-- 		<cc-selectDity
			:province="province"
			:city="city"
			:area="area"
			:show="show"
			@changeClick="changeClick"
			@sureSelectArea="onsetCity"
			@hideShow="onhideShow"
		></cc-selectDity> -->
		<cityPicker @confirm="addrConfirm" @cancel="show = false" :visible="show" />

		<!-- 学过的技能 -->
		<view
			class="props-overlay"
			v-if="skillsLearnedShow"
			@click="skillsLearnedShow = !skillsLearnedShow"
			@mousemove.stop.prevent
		></view>
		<view class="props-hobby-wrap" v-if="skillsLearnedShow">
			<view class="hobby-title">
				<!-- <view class="title-t">选择您的学过的技能</view> -->
				<view class="cross" @click="skillsLearnedShow = !skillsLearnedShow"></view>
			</view>
			<view class="hobby-wrap">
				<view class="hobby-content">
					<view
						v-for="(item, index) in skillsLearnedList"
						:class="['label-li', labelONSkillsLearned(index) ? 'on' : '']"
						@click="changeLabelSkillsLearned(index)"
					>
						{{ item }}
					</view>
				</view>
			</view>
			<view class="btn-wrap">
				<view class="btn-ca btn-cancel" @click="skillsLearnedShow = false">取消</view>
				<view class="btn-ca btn-affirm" @click="skillsLearnedConfirm">确认</view>
			</view>
		</view>

		<!-- 喜欢的品牌 -->
		<view
			class="props-overlay"
			v-if="favoriteBrandShow"
			@click="favoriteBrandShow = !favoriteBrandShow"
			@mousemove.stop.prevent
		></view>
		<view class="props-hobby-wrap" v-if="favoriteBrandShow">
			<view class="hobby-title">
				<!-- <view class="title-t">选择您的学过的技能</view> -->
				<view class="cross" @click="favoriteBrandShow = !favoriteBrandShow"></view>
			</view>
			<view class="hobby-wrap">
				<view class="hobby-content">
					<view
						v-for="(item, index) in favoriteBrandList"
						:class="['label-li', labelONFavoriteBrand(index) ? 'on' : '']"
						@click="changeLabelFavoriteBrand(index)"
					>
						{{ item }}
					</view>
				</view>
			</view>
			<view class="btn-wrap">
				<view class="btn-ca btn-cancel" @click="favoriteBrandShow = false">取消</view>
				<view class="btn-ca btn-affirm" @click="favoriteBrandConfirm">确认</view>
			</view>
		</view>
	</Top-Page>
</template>

<script>
import cityPicker from "@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker"
import { useloginStore } from "@/store/login"
import pinia from "@/store/index"
import avatar from "@/components/yq-avatar/yq-avatar.vue"
const loginStore = useloginStore(pinia)
import { chooseFiles, removeFile, uploadFiles, previewImage } from "@/utils/fileUtils.js"
export default {
	components: {
		avatar,
		cityPicker,
	},
	data() {
		return {
			temp_attended_schools: "",
			temp_previous_employer: "",
			temp_lived_address: "",
			skillsLearnedShow: false,
			skillsLearnedIndexList: [],
			skillsLearnedList: [
				"专业知识",
				"技术技能",
				"沟通能力",
				"团队合作",
				"解决问题能力",
				"创新能力",
				"领导能力",
				"适应能力",
				"时间管理",
				"专业道德",
			],
			favoriteBrandShow: false,
			favoriteBrandIndexList: [],
			favoriteBrandList: [
				"香奈儿",
				"路易威登",
				"圣罗兰",
				"古驰",
				"慧驰",
				"卡地亚",
				"阿玛尼",
				"欧米茄",
				"范思哲",
				"爱马仕",
				"浪琴",
			],
			avatarNumStr: "avatar", //第一或第二或第三个头像
			userInfoNum: 1, //第一或第二或第三个头像
			footprint: [],
			labelListIndex: [],
			addHobbyLabel: [],
			labelList: [],
			selectShow: false,
			addressData: {
				name: "",
				phone: "",
				identity_address: "",
				address: "北京北京市东城区", //北京北京市东城区
				moreAddres: "",
				isdefult: 0,
			},
			//现住址
			present_address_show: false,
			present_address_province: "北京",
			present_address_city: "北京市",
			present_address_area: "东城区",
			present_address_areaCode: "110101",
			present_address_address: "",
			//身份证地址
			show: false,
			province: "北京",
			city: "北京市",
			area: "东城区",
			areaCode: "110101",
			age: "",
			loginStore: loginStore,
			globalConfig: loginStore.globalConfig,
			userInfo: {},
			sexList: [
				// {
				// 	id: "2",
				// 	name: "未知",
				// },
				{
					id: "1",
					name: "男",
				},
				{
					id: "0",
					name: "女",
				},
			],
			saved: false,
			baseShow: false,
			baseList: {
				user_name: {
					name: "姓名",
					state: 0,
				},
				identity_address: {
					name: "出生地址",
					state: 0,
				},
				identity: {
					name: "身份证号码",
					state: 0,
				},
				address: {
					name: "现住地址",
					state: 0,
				},
				work_experience: {
					name: "现工作单位",
					state: 0,
				},
				school: {
					name: "学校",
					state: 0,
				},
				friends: {
					name: "想记忆的家人或朋友",
					state: 0,
				},
				good_at: {
					name: "技能",
					state: 0,
				},
				speciality: {
					name: "现在特长",
					state: 0,
				},
				hobby: {
					name: "兴趣爱好",
					state: 0,
				},
				footprint: {
					name: "我的足迹",
					state: 0,
				},
				work_experience: {
					name: "工作经历",
					state: 0,
				},
				take_address: {
					name: "收货地址",
					state: 0,
				},
				employment_log: {
					name: "创业就业经历",
					state: 0,
				},
				lived_address: {
					name: "曾经住过的地址",
					state: 0,
				},
				previous_employer: {
					name: "曾工作单位",
					state: 0,
				},
				attended_schools: {
					name: "曾就读过的学校",
					state: 0,
				},
				mem_family_friends: {
					name: "记忆的家人或朋友",
					state: 0,
				},
				skills_learned: {
					name: "学过的技能",
					state: 0,
				},
				favorite_brand: {
					name: "喜欢的品牌",
					state: 0,
				},
			},
		}
	},
	computed: {
		baseConfigNum() {
			let num = 0
			for (let key in this.baseList) {
				console.log(this.baseList[key].state)
				if (this.baseList[key].state) {
					// console.log(111, "111")
					num += 1
				}
			}
			return num
		},
	},
	mounted() {
		this.userInfo = JSON.parse(JSON.stringify(loginStore.userInfo))
		this.labelList = JSON.parse(JSON.stringify(uni.getStorageSync("hobby_list") ?? "[]"))

		let baseInfoConfig = uni.getStorageSync("baseInfoConfig")
		if (baseInfoConfig) {
			for (let key in this.baseList) {
				this.baseList[key].state = baseInfoConfig[key]
			}
		}
		console.log(baseInfoConfig, "baseInfoConfig")

		this.province = this.userInfo.province ?? "北京"
		this.city = this.userInfo.city ?? "市辖区"
		this.area = this.userInfo.area ?? "东城区"
		this.addressData.address = this.userInfo.address
		this.addressData.identity_address = this.userInfo.identity_address ?? ""
		this.footprint = this.userInfo.footprint

		//自定义的爱好
		const hobbyArr = this.userInfo.hobby.split("-")

		hobbyArr.forEach((item) => {
			!this.labelList.includes(item) && this.addHobbyLabel.push({ value: item })
		})
	},
	methods: {
		addList(key, t, value) {
			if (value.trim() === "") {
				uni.showToast({
					title: "请输入内容",
					icon: "none",
				})
			} else {
				this.userInfo[key].push(value)
				this[t] = ""
			}
		},
		delList(key, index) {
			this.userInfo[key].splice(index, 1)
		},
		addrConfirm(e) {
			console.log(e, "e")
			this.province = e.provinceName
			this.city = e.cityName
			this.area = e.areaName
			this.show = false
		},
		baseConfirm() {
			console.log(this.baseList)
			let obj = {}
			for (let key in this.baseList) {
				obj[key] = this.baseList[key].state
			}
			console.log(obj, "obj")
			uni.showLoading({
				title: "更新中",
				mask: true,
			})
			this.$api.friendApi.updateUserInfoShow(obj).then((res) => {
				console.log(res, "res.data")
				if (res.code === 0) {
					uni.setStorageSync("baseInfoConfig", res.data)
				}
				uni.showToast({
					title: "更新成功",
				})
				this.baseShow = false
			})
		},
		changeBase(e) {
			e.state = e.state === 1 ? 0 : 1
		},
		//添加头像和用户名
		addAvatar() {},
		//定位足迹
		getLocation() {
			geocode: true,
				uni.getLocation({
					success: (res) => {
						console.log("定位", res)
					},
				})
		},
		// 处理选择文件
		async handleChooseFiles(fieldName) {
			try {
				this[fieldName] = await chooseFiles(this[fieldName])
			} catch (error) {
				console.error("选择文件失败:", error)
			}
		},
		// 处理删除文件
		handleRemoveFile(fieldName, index) {
			this[fieldName] = removeFile(this[fieldName], index)
		},
		// 处理图片预览
		handlePreviewImage(fieldName, index) {
			previewImage(this[fieldName], index)
		},
		// 处理上传文件
		async handleUploadFiles(fieldName) {
			try {
				const uploadUrl = this.$api.msgApi.uploadImage // 替换为你的上传接口地址

				const files = []
				this[fieldName].forEach((item) => {
					if (item.name) files.push(item)
				})

				console.log(files)
				const responses = await uploadFiles(files, uploadUrl)
				// console.log('上传成功:', responses);
				return responses
			} catch (error) {
				// console.error('上传失败:', error);
				return ""
			}
		},
		//是否可以被搜索
		setBeSearch(e) {
			const value = e.detail.value
			this.userInfo.be_search = value ? 1 : 0
		},
		//爱好 -- 取消
		selectCancel() {
			// this.labelListIndex.length = 0;
			this.selectShow = false
		},
		//爱好 -- 确定
		selectAffirm() {
			let adds = this.addHobbyLabel.map((item) => item.value)
			adds = adds.join("-")

			let s = ""

			this.labelList.forEach((item, index) => {
				s += this.labelListIndex.includes(index) ? `${item}-` : ""
			})

			s = s.substring(0, s.length - 1)

			if (s) {
				adds && (s += `-${adds}`)
			} else {
				s = adds
			}

			const sArr = s.split("-")
			const arrSet = Array.from(new Set(sArr))
			const setStr = arrSet.join("-")

			this.userInfo.hobby = setStr

			this.selectShow = false
		},
		skillsLearnedConfirm() {
			let s = ""
			this.skillsLearnedList.forEach((item, index) => {
				s += this.skillsLearnedIndexList.includes(index) ? `${item}-` : ""
			})
			s = s.substring(0, s.length - 1)
			this.userInfo.skills_learned = s
			this.skillsLearnedShow = false
		},
		favoriteBrandConfirm() {
			let s = ""
			this.favoriteBrandList.forEach((item, index) => {
				s += this.favoriteBrandIndexList.includes(index) ? `${item}-` : ""
			})
			s = s.substring(0, s.length - 1)
			this.userInfo.favorite_brand = s
			this.favoriteBrandShow = false
		},
		changeClick(value, value2, value3, value4) {
			// console.log('地址选择器 = ' + value + value2 + value3 + value4);

			this.province = value
			this.city = value2
			this.area = value3
			this.areaCode = value4

			// this.userInfo.address = `${value}-${value2}-${value3}`;
		},
		changeClick2(value, value2, value3, value4) {
			// console.log('地址选择器 = ' + value + value2 + value3 + value4);

			this.present_address_province = value
			this.present_address_city = value2
			this.present_address_area = value3
			this.present_address_areaCode = value4

			this.present_address_address = `${value}-${value2}-${value3}`
		},
		onhideShow() {
			this.show = false
			this.present_address_show = false
		},
		//选中省市区
		onsetCity(e) {
			let data = e.detail.target.dataset
			let address = data.province + data.city + data.area
			this.show = false

			// this.addressData.address = address;
			this.province = data.province
			this.city = data.city
			this.area = data.area
		},
		//选中省市区
		onsetCity2(e) {
			let data = e.detail.target.dataset
			let address = data.province + data.city + data.area
			this.present_address_show = false
			this.present_address_address = address
		},
		labelON(index) {
			let s = false
			if (this.labelListIndex.includes(index)) {
				s = true
			} else {
				s = false
			}
			return s
		},
		labelONSkillsLearned(index) {
			let s = false
			if (this.skillsLearnedIndexList.includes(index)) {
				s = true
			} else {
				s = false
			}
			return s
		},
		labelONFavoriteBrand(index) {
			let s = false
			if (this.favoriteBrandIndexList.includes(index)) {
				s = true
			} else {
				s = false
			}
			return s
		},
		//添加<爱好>标签
		addHobby() {
			this.addHobbyLabel.push({ value: "" })
		},
		updateInput(index, event) {
			this.$set(this.addHobbyLabel, index, { value: event.detail.value })
		},
		changeLabel(index) {
			const ind = this.labelListIndex.indexOf(index)
			if (ind == -1) {
				this.labelListIndex.push(index)
			} else {
				this.labelListIndex.splice(ind, 1)
			}
		},
		changeLabelSkillsLearned(index) {
			const ind = this.skillsLearnedIndexList.indexOf(index)
			if (ind == -1) {
				this.skillsLearnedIndexList.push(index)
			} else {
				this.skillsLearnedIndexList.splice(ind, 1)
			}
		},
		changeLabelFavoriteBrand(index) {
			const ind = this.favoriteBrandIndexList.indexOf(index)
			if (ind == -1) {
				this.favoriteBrandIndexList.push(index)
			} else {
				this.favoriteBrandIndexList.splice(ind, 1)
			}
		},
		ageBlur(event) {
			const value = event.detail.value
			this.userInfo.age = Number(value)
		},
		logout() {
			let client_id = uni.getStorageSync("client_id")
			this.$api.LoginApi.logout({ client_id: client_id }).then((res) => {
				if (res.code == 0) {
					loginStore.logout()
				}
			})
		},
		textareaBInput(e) {
			this.userInfo.motto = e.detail.value
		},
		changeSex(evt) {
			this.userInfo.sex = parseInt(evt.detail.value)
		},
		// 通用的上传并解析文件数据的方法
		async uploadAndParseFiles(fieldName) {
			const uploadFilesRes = await this.handleUploadFiles(fieldName)
			return uploadFilesRes.map((item) => JSON.parse(item.data).data)
		},
		async saveInfo() {
			if (this.userInfo.user_name == "") {
				uni.showToast({
					title: "请输入实名信息",
					icon: "none",
				})
				return false
			}

			if (this.userInfo.identity == "") {
				uni.showToast({
					title: "请输入身份证信息",
					icon: "none",
				})
				return false
			}

			if (this.userInfo.realname == "") {
				uni.showToast({
					title: "请输入昵称",
					icon: "none",
				})
				return false
			}

			if (!Number(this.userInfo.age)) {
				uni.showToast({
					title: "请输入年龄",
					icon: "none",
				})
				return false
			}

			if (Number(this.userInfo.age) < 18 || Number(this.userInfo.age) > 100) {
				uni.showToast({
					title: `我们的服务仅适用于年满18岁及以上的成年人。请重新输入`,
					icon: "none",
				})
				return false
			}

			let footprint = []
			try {
				// 我的足迹
				footprint = await this.uploadAndParseFiles("footprint")
				this.userInfo.footprint.push(...footprint)
			} catch (error) {
				console.error("上传文件失败:", error)
			}

			// 防止无限次点击
			this.saved = true
			let params = {
				// be_search: this.userInfo.be_search, //是否可以被搜索
				take_address: this.userInfo.take_address, //收货地址
				employment_log: this.userInfo.employment_log, //创业就业经历
				speciality: this.userInfo.speciality, //特长专长
				footprint: this.userInfo.footprint, //我的足迹
				realname: this.userInfo.realname,
				realname2: this.userInfo.realname2,
				realname3: this.userInfo.realname3,
				email: this.userInfo.email,
				cl_code: this.userInfo.cl_code,
				sex: this.userInfo.sex,
				motto: this.userInfo.motto,
				age: this.userInfo.age,
				user_name: this.userInfo.user_name,
				school: this.userInfo.school,
				friends: this.userInfo.friends,
				good_at: this.userInfo.good_at,
				hobby: this.userInfo.hobby,
				work_experience: this.userInfo.work_experience,
				province: this.province,
				city: this.city,
				area: this.area,
				address: this.addressData.address,
				identity_address: this.addressData.identity_address,
				identity: this.userInfo.identity,

				lived_address: this.userInfo.lived_address,
				previous_employer: this.userInfo.previous_employer,
				attended_schools: this.userInfo.attended_schools,
				mem_family_friends: this.userInfo.mem_family_friends,
				skills_learned: this.userInfo.skills_learned,
				favorite_brand: this.userInfo.favorite_brand,
			}

			this.$api.msgApi.updateUserInfo(params).then((res) => {
				if (res.code == 0) {
					uni.showToast({
						title: "保存成功",
						icon: "none",
					})

					let data = JSON.parse(JSON.stringify(res.data))
					loginStore.login(data)
					uni.setStorageSync("userInfo", data)
					console.log(data)
				}
			})
			// 8秒后可以重新保存
			setTimeout(() => {
				this.saved = false
			}, 8000)
		},
		setAvatar() {
			uni.navigateTo({
				url: "/pages/mine/avatar",
			})
		},
		changeAvatarNum(num) {
			this.avatarNumStr = `avatar${num}`
			this.userInfoNum = num
		},
		uploadAvatar(res) {
			uni.showLoading({
				title: "上传中...",
			})
			uni.uploadFile({
				url: this.$api.msgApi.uploadAvatar,
				filePath: res.path,
				name: "file",
				header: {
					Authorization: uni.getStorageSync("authToken"),
				},
				formData: {
					ext: "png",
					num: this.userInfoNum,
				},
				success: (e) => {
					uni.hideLoading()
					let res = JSON.parse(e.data)
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: "none",
						})
						// this.userInfo.avatar = res.data;

						if (this.userInfoNum < 2) {
							this.userInfo[`avatar`] = res.data
						} else {
							this.userInfo[`avatar${this.userInfoNum}`] = res.data
						}
						let data = JSON.parse(JSON.stringify(this.userInfo))
						loginStore.login(data)
					}
				},
				fail: (res) => {
					uni.hideLoading()
				},
			})
		},
	},
}
</script>

<style lang="scss">
.btn-wrap {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 40rpx;
	line-height: 1;
}
.btn-ca {
	padding: 32rpx 80rpx;
	border-radius: 16rpx;
	letter-spacing: 2rpx;
}
.btn-cancel {
	color: #3d3d3d;
	background-color: #dddddd;
	font-size: calc(var(--amplified_base) * 28rpx);
}
.btn-affirm {
	background-color: #1677ff;
	color: #fff;
	font-size: calc(var(--amplified_base) * 28rpx);
}
.uni-input-1 {
	width: 100%;
	min-height: 3em;
}

.title {
	flex-shrink: 0;
}

.value-wrap-2 {
	width: 100%;
	min-height: 1em;
	height: auto;
}

.props-overlay {
	position: fixed;
	top: var(--status-bar-height);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 203;
	background-color: rgba(0, 0, 0, 0.7);
}

.props-hobby-wrap {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 204;
	padding: 32rpx 32rpx 64rpx;
	background: #fff;
	transition: transform 0.3s;
	border-radius: 16rpx 16rpx 0 0;

	.add-hobby-label {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		font-size: calc(var(--amplified_base) * 28rpx);
		.add-hobby-item {
			width: 4em;
			margin-top: 24rpx;
			margin-right: 16rpx;
			box-sizing: content-box;
			padding: 24rpx;
			background-color: #1677ff;
			color: #fff;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
		}
	}

	.add-wrap {
		display: flex;
		align-items: center;
		margin-top: 50rpx;
		font-size: calc(var(--amplified_base) * 28rpx);
		color: #6a6a6a;
		.add {
			margin-right: 14rpx;
			width: 48rpx;
			height: 48rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background-color: #eaeaea;
			color: #909090;
		}
	}
}
.hobby-title {
	position: relative;
	display: flex;
	justify-content: flex-end;
}

.title-t {
	position: absolute;
	width: 100%;
	padding: 0 2em;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
}
.cross {
	position: relative;
	width: 40rpx;
	height: 40rpx;
}

.cross::before,
.cross::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2rpx;
	background-color: black;
	top: 50%;
	transform-origin: center;
}

.cross::before {
	transform: rotate(45deg);
}

.cross::after {
	transform: rotate(-45deg);
}
.hobby-wrap {
	max-height: 40vh;
	overflow: scroll;
}
.hobby-content {
	margin-top: 40rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	align-content: flex-start;
}
.label-li {
	padding: 24rpx;
	border: 1rpx solid #6a6a6a;
	color: #6a6a6a;
	margin-right: 16rpx;
	margin-top: 12rpx;
	border-radius: 16rpx;
	font-size: calc(var(--amplified_base) * 28rpx);
}
.label-li2 {
	padding: 12rpx 16rpx;
	border: 1rpx solid #ccc;
	color: #ccc;
	margin-right: 18rpx;
	margin-top: 18rpx;
	border-radius: 8rpx;
}
.on2 {
	background-color: #1677ff;
	color: #fff;
}
.on {
	background-color: #1677ff;
	color: #fff;
}

.cu-form-group-1 {
	padding: 1rem 30upx;

	&.align-start .title {
		margin-top: 0;
	}
}

.upimage-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	//图片反显
	.upimage-item {
		position: relative;
		width: calc(var(--amplified_base) * 120rpx);
		height: calc(var(--amplified_base) * 120rpx);
		border-radius: calc(var(--amplified_base) * 16rpx);
		overflow: hidden;
		margin-left: 12rpx;

		.upimage-item__image {
			position: relative;
			width: 100%;
			height: 100%;
		}

		//删除图标
		.close-css_icon {
			position: absolute;
			top: 0;
			right: 0;
			background-color: #f4f4f4;
			border-radius: 50%;

			&::before,
			&::after {
				width: 30rpx;
				height: 4rpx;
			}
		}
	}

	//添加图片
	.add-image {
		background: #f5f5f7;

		&::after,
		&::before {
			background-color: #a2a3a5;
		}

		&::after {
			left: calc(50% - 1rpx);
		}
	}
}
.cu-form-group-avatar {
	justify-content: flex-start;
}

.avatar-content {
	pointer-events: none;
}

.avatar-wrap {
	margin-right: 32rpx;
}

.switch {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

:deep .avatar-content__activity .my-avatar {
	border: 4rpx solid #1a66ff;
	border-radius: 50%;
}

:deep .avatar-content__activity .add-avatar {
	border: 4rpx solid #1a66ff;
	border-radius: 50%;
}
.warn {
	font-size: calc(var(--amplified_base) * 26rpx);
	padding: 10rpx 30rpx;
	background-color: #fff;
}
</style>